<!-- 签字板 -->
<template>
  <div class="">
    <ul class="main-right">
      <li class="icons flex align">考官签名</li>
      <div class="flex between">
        <img
          :src="avatar"
          width="100%"
          height="100%"
          v-if="avatar"
          class="signin"
        />

        <div class="signin" v-if="!avatar">
          <img
            :src="
              examinerSign
                ? examinerSign
                : images
                ? images
                : require('@/assets/images/sign.png')
            "
            class="sign_img"
            :style="{
              height: avatar ? (examinerSign ? '100%' : '80%') : '80%',
            }"
          />
          <!--  v-if="avatar ? !examinerSign : false" -->
          <div class="flex around">
            <el-button @click="StartWebSignBtn_onclick(0)" class="btns">{{
              images ? "重签" : "签名1"
            }}</el-button>
            <!-- <el-button @click="save" class="btn" v-if="images">保存</el-button> -->
          </div>
        </div>
        <div class="signin">
          <img
            :src="
              examinerSign
                ? examinerSign
                : images2
                ? images2
                : require('@/assets/images/sign.png')
            "
            class="sign_img"
            :style="{
              height: avatar ? (examinerSign ? '100%' : '80%') : '80%',
            }"
          />
          <!--  v-if="avatar ? !examinerSign : false" -->
          <div
            class="flex around"
            v-if="obj ? (avatar ? !examinerSign : false) : true"
          >
            <el-button @click="StartWebSignBtn_onclick(1)" class="btns">{{
              images2 ? "重签" : "签名2"
            }}</el-button>
            <el-button @click="edit" class="btns" v-if="obj && images2"
              >保存</el-button
            >
          </div>
        </div>
      </div>
      <li class="btn-box flex" v-if="!obj">
        <el-button @click="save">保存</el-button>
        <!-- <el-button @click="StartWebSignBtn_onclick">{{
          images ? "重签" : "签名"
        }}</el-button> -->
      </li>
      <li class="finished">
        <slot> </slot>
      </li>
    </ul>
  </div>
</template>

<script>
import {
  saveExaminerSign,
  upLoadImage,
  ExaminerSignDetails,
} from "@/api/apiData";
import { mapState, mapMutations } from "vuex";
export default {
  props: ["avatar", "examinerSign", "obj"],
  components: {},
  data() {
    return {
      // value: "C:\\hw.xml", //D:\\hw.xml
      // signPath: "C:\\test.png", //D:\\test.png
      webSocket: null,
      showSign: true,
      images: null, //考官1
      images2: null, //考官2
      isIndex: 0, // 0 签名1  1 签名2
      // ctx: null, //canvas画布
      // point: {
      //   //默认开始触点
      //   x: 0,
      //   y: 0,
      // },
      // content: false, //画布是否有内容
      // moving: false, // 是否正在绘制中且移动
    };
  },
  computed: {
    ...mapState(["is_sign"]),
  },
  methods: {
    ...mapMutations(["saveSign"]),
    // 获取当前浏览器建立 websocket链接
    // establishlink() {
    //   const that = this;
    //   var webSocket = new WebSocket("ws://localhost:1818");
    //   window.onbeforeunload = function () {};
    //   webSocket.onerror = function (event) {
    //     that.onError(event);
    //   };

    //   webSocket.onopen = function (event) {
    //     that.onOpen(event);
    //   };

    //   webSocket.onclose = function (event) {
    //     that.onClose(event);
    //   };

    //   webSocket.onmessage = function (event) {
    //     that.onMessage(event);
    //   };
    //   that.webSocket = webSocket;
    // },
    // onOpen(event) {
    //   // alert(event.data);
    // },
    // onError(event) {
    //   alert(event.data);
    // },
    // onClose(event) {},
    // // 签字完成 返回 值
    // onMessage(event) {
    //   const that = this;
    //   var begin_data = "data:image/jpeg;base64,";
    //   const { isIndex } = that;
    //   if (event.data.indexOf("BeginAfterSign") >= 0) {
    //     var newLogMsg =
    //       event.data.replace("BeginAfterSign", "").replace("EndAfterSign", "") +
    //       "\n";
    //     if (isIndex == 1) {
    //       that.images2 = `${begin_data}${newLogMsg}`;
    //     } else {
    //       that.images = `${begin_data}${newLogMsg}`;
    //     }
    //   }
    // },
    StartWebSignBtn_onclick(el) {
      const that = this;
      // const { webSocket } = that;
      that.isIndex = el;
      that.$router.push({
        name: "choosedSign",
        query: {
          index: el,
        },
      });

      // // D:\\dist\\index.html
      // webSocket.send("OpenURL(http://192.168.1.124:8085/#/sign)");
    },
    // 获取签名照
    getExamnerSign() {
      const that = this;
      const { is_sign, obj } = that;
      if (is_sign.length > 0) {
        is_sign.forEach((item) => {
          if (item) {
            ExaminerSignDetails({ examiner_sign_id: item.id }).then((res) => {
              if (res.code == 1) {
                if (item.index == 0) {
                  that.images = res.data.image;
                } else {
                  that.images2 = res.data.image;
                }
              } else {
                alert(res.msg);
              }
            });
          }
        });
      } else {
        if (!obj) {
          that.images = null;
          that.images2 = null;
          that.$parent.rest();
        }
      }
    },
    // 确定
    edit() {
      const that = this;
      const { images2, obj } = that;
      let params = {
        examiner_token: obj.examiner_token,
        subject_record_id: obj.subject_record_id,
        examiner_sign2: images2,
      };
      saveExaminerSign(params).then((res) => {
        if (res.code == 1) {
          that.$message({
            message: res.msg,
            type: "success",
          });
          that.saveSign([]);
          that.$emit("update:examinerSign", images2);
          that.images = null;
        } else {
          that.$message({
            message: res.msg,
            type: "error",
          });
        }
      });
    },
    // 保存签名
    save() {
      let that = this;
      const { images, images2, obj } = that;
      if (obj) {
        that.edit();
        return;
      }
      that.$emit("getSignin", [images, images2]);
      if (!images) {
        that.$notify({
          title: "提示",
          message: "请先将签名1签名完成~",
          type: "warning",
          duration: 2000,
        });
        return;
      }
      if (images || images2) {
        that.$notify({
          title: "提示",
          message: "签名保存成功~",
          type: "success",
          duration: 2000,
        });
      }
      // if (images2) {
      //   that.$notify({
      //     title: "提示",
      //     message: "签名2保存成功~",
      //     type: "success",
      //     duration: 2000,
      //   });
      // }
    },
  },
  created() {},
  mounted() {
    this.getExamnerSign();
  },
  activated() {
    this.getExamnerSign();
  },
};
</script>
<style lang='less' scoped>
.main-right {
  background: #fff;
  border-radius: 15px;
  padding: 1px 40px;
  margin-bottom: 5px;
}
.icons {
  color: #2d2d2d;
  font-size: 34px;
  font-weight: 500;
  margin: 20px 0;
}
.icons::before {
  content: "";
  width: 7px;
  height: 34px;
  background: rgba(255, 91, 0, 0.6);
  border-radius: 10px;
  margin-right: 15px;
}
// 签名
.signin {
  background: #f9f9f9;
  width: 48%;
  height: 40vh;
  margin-bottom: 20px;
  position: relative;
  box-shadow: 0 0 10px rgba(110, 0, 0, 0.2);
  border-radius: 10px;
  #canvas {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 10px;
  }
  .sign_img {
    width: 100%;
    height: 60%;
  }
}
.btns {
  background: linear-gradient(to right, #ff8375, #d74939);
  font-size: 20px;
  color: #fff;
  font-weight: bold;
}
.btn-box {
  justify-content: flex-end;
  /deep/.el-button {
    background: linear-gradient(to right, #ff8375, #d74939);
    font-size: 20px;
    color: #fff;
    font-weight: bold;
  }
}
.finished {
  display: block;
  width: 100%;
  margin: 30px auto 20px;
  /deep/.el-button {
    width: 100%;
    background: linear-gradient(to right, #ff8375, #d74939);
    font-size: 30px;
    color: #fff;
    font-weight: bold;
    border-radius: 30px;
  }
}
</style>